<script>
import axios from "axios";

export default {
  name: "liveClasses",
  data(){
    return{
        liveList:[]
    }
  },
  methods:{

  },
  created() {
    axios.post('/api/pc/liveCourseInfo/list', {
      pageNum:1,
      pageSize:4,
    },{headers:{'content-type':'application/x-www-form-urlencoded'}}).then(res=>{
      console.log(res.data.rows)
      this.liveList=res.data.rows;
      console.log(this.liveList)
    })
  },

}
</script>

<template>
<div>
  <div class="w">
    <div class="liveClasses">
      <div class="liveClass-l">
        <div class="title-l">
          <div class="t-l-l">
            <img src="../assets/zhibo.png"/>
            <p class="p1">直播课程</p>
            <p class="p2">互联网大佬在线直播</p>
          </div>
          <div class="t-l-r">
            <img src="../assets/zhibo1.png" height="36" width="36"/>
            <img src="../assets/zhibo2.png" height="36" width="36"/>
          </div>
        </div>
        <div class="center-l">
          <div class="c-l-t" v-for="item in liveList" :key="item">
            <router-link to="/xiangqin">
            <div class="center1" >
              <div class="box">
               <!--              300 200-->
               <img :src="item.liveCoverUrl" height="350" width="600"/>
              </div>
             <!--            300 50-->
              <div class="box1">
               <p>{{item.courseTitle}}</p>
               <p>直播结束</p>
              </div>
            </div>
            </router-link>


          </div>


        </div>
      </div>
      <div class="liveClass-r">
        <div class="title-r">
          <img src="../assets/kecheng.png">
          <p class="p1">直播课程</p>
          <p class="p2">互联网大佬在线直播</p>
        </div>
        <div class="center-r">
          <div class="sellingItem">
            <div class="sellingImg">
              <img src="../assets/求职成功之道与术_1-1227885610962780160.jpg"/></div>
            <div class="sellingTitle">
              <div>求职成功之道与术</div>
              <div class="sellingNum">
                <div>&yen;800</div>
                <div>647人报名</div>
              </div>
            </div>
          </div> <div class="sellingItem">
            <div class="sellingImg">
              <img src="../assets/求职成功之道与术_1-1227885610962780160.jpg"/></div>
            <div class="sellingTitle">
              <div>求职成功之道与术</div>
              <div class="sellingNum">
                <div>&yen;800</div>
                <div>647人报名</div>
              </div>
            </div>
          </div> <div class="sellingItem">
            <div class="sellingImg">
              <img src="../assets/求职成功之道与术_1-1227885610962780160.jpg"/></div>
            <div class="sellingTitle">
              <div>求职成功之道与术</div>
              <div class="sellingNum">
                <div>&yen;800</div>
                <div>647人报名</div>
              </div>
            </div>
          </div>
          <div class="gen1">
            <button class="gengXuan">换一换</button>
          </div>
        </div>

      </div>
     </div>
  </div>
</div>
</template>

<style scoped lang="less">
* {
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
}
li{
  list-style: none;
}
.w {
  width: 1200px;
  margin: 0 auto;

}
.center-l{
  flex-wrap: wrap;
  display: flex;

}
.liveClasses{
  display: flex;
  justify-content: space-between;

}
.liveClass-l{
  width: 640px;
  background-color: white;
  border-radius: 20px;
  padding: 20px 10px;
}
.title-l{
  display: flex;
  justify-content: space-between;
}
.t-l-l {
  display: flex;
  align-items: end;
}
.t-l-l img {
  width: 40px;
  height: 40px;
}
.t-l-r {
  padding-top: 20px;
}
.t-l-r img {
  width: 15px;
  height: 15px;
  margin-left: 5px;
}
.p1 {
  font-size: 20px;
}
.p2 {
  font-size: 14px;
}
p {
  margin: 10px;
}
.c-l-t{
  display: flex;
  justify-content: space-around;
}
.box{
  width: 300px;
  height: 200px;
}
.box img{
  width: 100%;
  height: 100%;
}
.box1 {
  width: 300px;
  height: 50px;
}
.center1{
  width: 290px;
  border-radius: 15px;
  background-color: white;
  overflow: hidden;
  margin: 10px;
  cursor: pointer;
  box-shadow: 0 0 10px grey;
}
//课程右
.liveClass-r {
  width: 500px;
  background-color: white;
  border-radius: 20px;
  padding: 20px 10px;
  position: relative;
}
.title-r  {
  display: flex;
  align-items: end;

}
.title-r img {
  width: 40px;
  height: 40px;
}
.center-r {
  width: 400px;
  height: 480px;
  padding: 20px;
  border-radius: 15px;
  margin: 20px auto;
  box-shadow: 0 0 10px grey;
  cursor: pointer;
}
.sellingImg {
  width: 200px;
  height: 100px;
  overflow: hidden;
  border-radius: 15px;
  margin-right: 20px;
}

.sellingImg:hover img {
  transform: scale(1.2, 1.2);
}

.sellingImg img {
  width: 100%;
  height: 100%;
  transition: transform 0.5s linear;
}
.sellingItem {
  display: flex;
  margin: 20px auto;
}

.sellingTitle {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.sellingNum>div:nth-child(1) {
  color: red;
  font-size: 18px;
}

.sellingNum>div:nth-child(2) {
  color: grey;
  font-size: 14px;
}
.gengXuan {
  width: 140px;
  height: 40px;
  background-image: linear-gradient(yellow, orange);
  border: none;
  border-radius: 10px;
}
.gen1 {
  margin: 15px auto;
  text-align: center;
}
</style>